<template>
	<view class="content">
		<view class="top-bolck"></view>
		<view class="report-view">
			<view class="conter-body">
				<!-- <view class="model-title">
					<i class="iconhomeworkfont iconchakan lefticon"></i>
					<view>作业报告</view>
				</view> -->
				<!-- 标题 -->
				<view class="box-title">
					<view><i class="iconhomeworkfont iconwentixcx" style="color: #ffaa7f;margin-right: 15rpx;"></i></view>
					<view>作业解析</view>
				</view>
				<!-- 题目信息 -->
				<view class="topic-content" v-for="(topic, toIndex) in answerData" :key="toIndex">
					<block v-if="imgTopic">
						<ImageShow v-if="filesType == 'image'" :url="topic.title" width="100%" height="40vh"></ImageShow>
						<video v-if="filesType == 'video'" style="width: 100%;height: 40vh;" :src="topic.title" controls></video>
						<audio v-if="filesType == 'audio'" :src="topic.title" controls></audio>
					</block>
					<block v-else>
						<view class="topic-title">
							<!-- <view class="topic-title-tap"><view class="tap-icon">0</view></view> -->
							<view class="topic-title-html" v-html="topic.title"></view>
							<view class="topic-option" v-for="(option, opIndex) in topic.answerList" :key="opIndex">{{ option.title }}</view>
						</view>
					</block>
					<!-- //答案 -->
					<view class="arc-box">
						<view class="arc-name">答案</view>
						<view class="arc-html" v-html="topic.result"></view>
					</view>
					<!-- //解析 -->
					<view class="arc-box">
						<view class="arc-name">解析</view>
						<view class="arc-html" v-html="topic.analysis"></view>
					</view>
					<!-- //分值 -->
					<view class="arc-box">
						<view class="arc-name">分值</view>
						<view class="arc-html">{{ topicScore }}</view>
					</view>
				</view>
				<!-- 标题 -->
				<view class="box-title">
					<view><i class="iconhomeworkfont iconhuangguanxcx" style="color: #ffaa7f;margin-right: 15rpx;"></i></view>
					<view>答题内容</view>
					<view class="piGaiState" v-if="isPiGai" style="color: #1FD0A3;">已批改 {{ myScore }}</view>
					<view class="piGaiState" v-else style="color: #F56C6C;">未批改</view>
				</view>
				<!-- //答案 -->
				<view class="arc-box" v-if="stuOption || stuOption != ''">
					<view class="arc-name">答案</view>
				</view>
				<block>
					<block v-if="Fujian">
						<view class="accessory">
							<view v-for="(fitem, findex) in quickFile" :key="findex">
								<view class="uploadIcon2" v-if="fitem.filesType == 'video'" @tap="preview(findex)"><i class="iconhomeworkfont iconbofangxcx"></i></view>
								<view class="uploadIcon2" v-if="fitem.filesType == 'audio'" @tap="preview(findex)"><i class="iconhomeworkfont iconyinpinxcx"></i></view>
								<view class="uploadIcon2" v-if="fitem.filesType == 'image'" @tap="preview(findex)"><i class="iconhomeworkfont iconxiangcexcx"></i></view>
							</view>
							<view class="accessoryText" @click="clearYuLang" v-if="yuLangShow">收起</view>
						</view>
						<block v-if="yuLangShow">
							<ImageShow
								v-if="quickFile[selectQuickIndex].filesType == 'image'"
								:url="quickFile[selectQuickIndex].url"
								width="100%"
								height="40vh"
								style="margin-bottom:40upx"
							></ImageShow>
							<video
								v-if="quickFile[selectQuickIndex].filesType == 'video'"
								style="margin-bottom:40upx;width: 100%;height: 40vh;"
								:src="quickFile[selectQuickIndex].url"
							></video>
							<audio v-if="quickFile[selectQuickIndex].filesType == 'audio'" :src="quickFile[selectQuickIndex].url" controls style="margin-bottom:40upx"></audio>
						</block>
						<NoMore v-if="!quickFile[0].url" style="line-height: 100upx;"></NoMore>
					</block>
					<view class="arc-html" v-else v-html="stuOption" style="font-size: 26rpx;margin-top: 20rpx;"></view>
				</block>
				<!-- //批改 -->
				<view class="arc-box" v-if="stuOption&&is_subjective == 'true'">
					<view class="arc-name">批改</view>
				</view>
				<view style="margin-top: 30rpx;position: relative;" v-if="stuOption&&is_subjective == 'true'">
					<view  v-if="hasFlower" class="has-flower"><i class="iconhomeworkfont iconbangyangfengcaixcx"></i></view>
					<block v-if="imgUrl">
						<ImageShow  v-if="imgUrlType == 'image'" :url="imgUrl" width="100%" height="40vh" style="margin-bottom:40upx"></ImageShow>
						<QzVideo v-if="imgUrlType == 'video'" style="margin-bottom:40upx" :url="imgUrl" width="100%"  height="40vh" :zhanTin="flag" :ClientRect="ClientRect"></QzVideo>
						<audio v-if="imgUrlType == 'audio'" :src="imgUrl" controls style="margin-bottom:40upx"></audio>
					</block>
					<NoMore v-else></NoMore>
				</view>
				<!-- //点评 -->
				<view class="arc-box" v-if="stuOption&&is_subjective == 'true'">
					<view class="arc-name">点评</view>
					<view class="arc-html">{{remark}}</view>
				</view>
				<!-- 标题 -->
				<view class="box-title"  v-if="otherTopic">
					<view><i class="iconhomeworkfont iconxiugaituozhanfeixcx" style="color: #ffaa7f;margin-right: 15rpx;"></i></view>
					<view>课外拓展</view>
				</view>
				<!-- //课外拓展 -->
				<block v-if="otherTopic">
					<view class="view-tab">
						<view class="tab-header">
							<view class="tab-item" :class="{isSelect:isExpand == 1}">举一反三</view>
							<view class="tab-item" :class="{isSelect:isExpand == 2}">微课天地</view>
							<view class="tab-item" :class="{isSelect:isExpand == 3}">名师课堂</view>
						</view>
						<view class="tab-body">
							<scroll-view scroll-y="true" style="height: 100%;">
								<view v-for="(item,index) in otherTopic" :key="index" style="margin: 20upx 0 60upx 0;">
									<view style="display: flex;margin-bottom: 20upx;">
										<view>{{index +  1}}.</view>
										<view v-html="item.content" style="flex:1;word-break: break-all;"></view>
									</view>
									<view v-html="item.options" style="margin-left: 40upx;word-break: break-all;"></view>
								</view>
								<NoMore v-if="otherTopic.length == 0"></NoMore>
							</scroll-view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import { formatSeconds } from '@/common/tool';
import NoMore from '@/components/qz-no-more.vue';
import ImageShow from '@/components/qz-movable-image-show.vue';
export default {
	components: {
		NoMore,
		ImageShow
	},
	data() {
		return {
			//页面传参
			student_id: null,
			homework_id: null,
			selectId: null,
			//试题
			answerData: [
				{
					unid: 1,
					title: '',
					analysis: '',
					result: '',
					answerList: [],
					question_type: 1,
					noShowTitle: true
				}
			],
			//图片题目显示
			imgTopic: false,
			filesType: null, //文件类型
			topicScore: 0, //题目分值
			
			//附件预览
			Fujian: false,
			//附件列表
			quickFile: [],
			//选择预览文件
			selectQuickIndex: 0,
			yuLangShow: false,
			//学生题目作答
			stuOption: '',
			is_subjective: '', //是否主观题
			
			//评价
			imgUrl: '',
			imgUrlType: '', //类型
			hasFlower: false, //批改图片小红花
			remark: '',
			isPiGai: false, //批改状态
			myScore: 0, //得分
			
			//拓展选项卡
			isExpand: 1,
			
			//举一反三
			otherTopic: false,
		};
	},
	onLoad: function(option) {
		this.student_id = option.student_id;
		this.homework_id = option.homework_id;
		this.selectId = option.selectId;
		this.get_topicReportData();
	},
	methods: {
		async get_topicReportData() {
			var query = {
				student_id: this.student_id,
				homework_id: this.homework_id,
				page: this.selectId
			};
			var url = '/api/v1/parent/homework/report/PersonReport';
			var res = await this.$wapi.apiPost(url, query);
			console.log('学生个人报告：', res);
		
			if (res.data.code != 200) {
				uni.showToast({
					title: res.data.message,
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 2000);
				return;
			}
			//作业评测
			this.commentValue = res.data.data.report.remark;
		
			//题目
			var question_type = res.data.data.analysis[0].matter_type || res.data.data.analysis[0].question_type;
		
			this.otherTopic = false;
		
			//作业类型 1 快速 2常规
			var HOME_TYPE = res.data.data.home_type;
		
			if (HOME_TYPE == 1) {
				var content = res.data.data.analysis[0].question;
				this.answerData[0].title = content;
			} else {
				// 题目类型 1图片 2系统
				var ANSERT_TYPE = res.data.data.page;
		
				if (ANSERT_TYPE == 2) {
					//重置图片题目条件
					this.imgTopic = false;
		
					//举一反三
					var otherTopic = res.data.data.other;
					this.otherTopic = otherTopic.map(el => {
						el.options = el.options.replace(/&&&&/g, '').replace(/,/g, '<br/>');
						return el;
					});
		
					//题目
					var content = res.data.data.analysis[0].matter;
					this.answerData[0].title = content;
		
					//选项
					var options = res.data.data.analysis[0].options;
					var regex = /(<([^>]+)>)/gi;
					var result = options
						.replace(regex, '')
						.replace(/&&&&/g, '')
						.split(',');
					var arr = [];
					result.forEach((el, index) => {
						arr.push({
							unid: index,
							title: el
						});
					});
					this.answerData[0].answerList = arr;
				} else {
					this.imgTopic = true;
					var content = res.data.data.analysis[0].question;
					this.answerData[0].title = content;
					var type = content.split('.');
					this.filesType = this.fileTypes(type[type.length - 1]);
				}
				//答案 String.fromCharCode(65+subaindex)
				var answer_option = res.data.data.analysis;
				if (question_type == 1) {
					var answer_optionArr = [];
					answer_option.forEach(el => {
						answer_optionArr.push(String.fromCharCode(65 + el.answer_options));
					});
					// this.answerData[0].result = answer_optionArr.join(',');
					var newAnswer;
					if (answer_optionArr.length > 1) {
						newAnswer = answer_optionArr.map((item, index) => {
							return `<p style="margin-bottom:10px"><b>选项${index + 1}：</b>${item || '无'}</p>`;
						});
					} else {
						newAnswer = [`<p style="margin-bottom:10px"><b>选项：</b>${answer_optionArr[0] || '无'}</p>`];
					}
					this.answerData[0].result = newAnswer.join('');
				} else {
					var answer_optionArr = [];
					answer_option.forEach(el => {
						answer_optionArr.push(el.answer);
					});
					var newAnswer;
					if (answer_optionArr.length > 1) {
						newAnswer = answer_optionArr.map((item, index) => {
							return `<p style="margin-bottom:10px"><b>第${index + 1}空：</b>${item || '无'}</p>`;
						});
					} else {
						newAnswer = [`<p style="margin-bottom:10px"><b>填空：</b>${answer_optionArr[0] || '无'}</p>`];
					}
					this.answerData[0].result = newAnswer.join('');
				}
		
				//解析
				var analysis = res.data.data.analysis[0].analysis || '<span>无</span>';
				this.answerData[0].analysis = analysis;
		
				//题目分值
				var topicScore = res.data.data.analysis[0].score;
				this.topicScore = topicScore == 0 ? '无' : topicScore;
			}
		
			//学生答案
			var studentItem = res.data.data.student.find(el => {
				return el.unid == this.selectId || el.matter_id == this.selectId;
			});
			console.log('学生答案', studentItem);
			this.getStudentContent(studentItem);
		},
		getStudentContent(item) {
			//判断是否是主观题 1选，二空
			var resData = item;
			var is_subjective = item.matter_type || item.question_type;
		
			//判断是否主观题
			if (is_subjective == 3 || is_subjective == 999 || is_subjective == 998) {
				this.is_subjective = 'true';
			} else {
				this.is_subjective = 'false';
			}
		
			//获取学生答案
			this.Fujian = false;
			if (is_subjective == 1) {
				var stuOption = resData.option_sort;
				var result = stuOption.split('&&&&');
				var arr = [];
				result.forEach((el, index) => {
					if (el) {
						arr.push(String.fromCharCode(65 + parseInt(el)));
					}
				});
				var newAnswer;
				if (arr.length > 1) {
					newAnswer = arr.map((item, index) => {
						return `<p style="margin-bottom:10px"><b>选项${index + 1}：</b>${item || '无'}</p>`;
					});
				} else {
					newAnswer = [`<p style="margin-bottom:10px"><b>选项：</b>${arr[0] || '无'}</p>`];
				}
				this.stuOption = newAnswer.join('');
			} else if (is_subjective == 2) {
				if (resData.options) {
					var result = resData.options.split('&&&&');
					var newAnswer;
					if (result.length > 1) {
						newAnswer = result.map((item, index) => {
							return `<p style="margin-bottom:10px"><b>第${index + 1}空：</b>${item || '无'}</p>`;
						});
					} else {
						newAnswer = [`<p style="margin-bottom:10px"><b>填空：</b>${result[0] || '无'}</p>`];
					}
					this.stuOption = newAnswer.join('');
				} else {
					this.Fujian = true;
					this.stuOption = true;
					var url = resData.picture || resData.accessory;
					var fileArr = url.split('&&&&');
					this.quickFile = fileArr.map(el => {
						var type = el.split('.');
						var filesType = this.fileTypes(type[type.length - 1]);
						var obj = {
							url: el,
							filesType
						};
						return obj;
					});
				}
			} else {
				this.Fujian = true;
				this.stuOption = true;
				var url = resData.picture || resData.accessory;
				var fileArr = url.split('&&&&');
				this.quickFile = fileArr.map(el => {
					var type = el.split('.');
					var filesType = this.fileTypes(type[type.length - 1]);
					var obj = {
						url: el,
						filesType
					};
					return obj;
				});
			}
		
			//评语，批改
			if (this.is_subjective == 'true') {
				this.hasFlower = resData.flower != 0 ? true : false;
				this.remark = resData.remark || '无';
		
				//类型判断
				if (resData.correct_picture) {
					var type = resData.correct_picture.split('.');
					var filesType = this.fileTypes(type[type.length - 1]);
					this.imgUrlType = filesType;
					this.imgUrl = resData.correct_picture;
				} else {
					this.imgUrl = resData.correct_picture;
				}
			}
		
			//批改状态
			this.isPiGai = resData.type == 0 ? false : true;
			// this.myScore = resData.myscore ? resData.myscore + '分' : '';
			this.myScore = resData.score ? (resData.myscore != null && resData.myscore != undefined  ? resData.myscore + '分' : '') : '';
		},
		preview(index) {
			console.log(index);
			this.yuLangShow = true;
			this.selectQuickIndex = index;
		},
		clearYuLang() {
			this.yuLangShow = false;
		},
		//根据后缀名判断文件类型
		fileTypes(suffix) {
			var suffix = suffix || '';
			var typeList = ['image', 'audio', 'video', 'file'];
			var length = typeList.length - 1;
			var suffixJson = {
				image: ['png', 'jpg', 'jpeg', 'gif', 'ico', 'bmp', 'pic', 'tif'],
				audio: ['mp3', 'ogg', 'wav', 'acc', 'vorbis', 'silk', 'mpeg'],
				video: ['mp4', 'webm', 'avi', 'rmvb', '3gp', 'flv']
			};
			var resultList = [];
			for (var attr in suffixJson) {
				resultList.push(!!~suffixJson[attr].indexOf(suffix));
			}
			var posIndex = resultList.indexOf(true);
			return posIndex != -1 ? typeList[posIndex] : typeList[length];
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #fafafa;
}
.content {
	width: 100%;
	min-height: 200rpx;
	background: url(http://homework-1302994015.cos.ap-guangzhou.myqcloud.com/homework/image/20210125164002600e83e266382.png) no-repeat;
	background-size: 100% 200rpx;

	padding: 35rpx;
	box-sizing: border-box;
	position: relative;

	.top-bolck {
		width: 100%;
		height: 40rpx;
		background: linear-gradient(180deg, #ffaa7f 0%, #ff7300 100%);
		border-radius: 10rpx;
	}

	.report-view {
		padding: 0 20rpx;
		margin: 0 auto;
		margin-top: -20rpx;
		border-radius: 5rpx;
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
	}
}

.report-view {
	

	.mess-title {
		font-size: 32rpx;
		font-weight: bold;
		height: 100rpx;
		color: #333333;
		line-height: 100rpx;
		border-bottom: 1px dashed #ccc;
		display: flex;

		.lefticon {
			color: #1fd0a3;
			font-weight: normal;
			margin-right: 15rpx;
			font-size: 32rpx;
		}
	}

	.conter-body {
		width: 100%;
		padding: 0 30rpx 40rpx 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;
	}

	.model-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #ffffff;
		display: flex;
		border-bottom: 1px dashed #ccc;

		.lefticon {
			color: #1fd0a3;
			font-weight: normal;
			margin-right: 15rpx;
			font-size: 32rpx;
		}
	}
}

.box-title {
	display: flex;
	align-items: center;
	font-size: 30rpx;
	font-weight: bold;
	padding: 40rpx 0 20rpx 0;
}

.piGaiState {
	font-size: 25rpx;
	margin-left: 20rpx;
}

.topic-content {
	width: 100%;
	margin-top: 20rpx;
}
	
.topic-title {
	font-size: 26rpx;

	.topic-title-tap {
		flex: 0 0 auto;
		width: 50rpx;
		margin-right: 10rpx;

		.tap-icon {
			width: 100%;
			color: #ffffff;
			background-color: #007aff;
			text-align: center;
		}
	}

	.topic-title-html {
		word-break: break-all;
	}
	
	.topic-option {
		margin-left: 40upx;
		margin-bottom: 16upx;
		word-break: break-all;
	}
}

.arc-box {
	width: 100%;
	font-size: 26rpx;
	display: flex;
	margin-top: 20rpx;
	.arc-name {
		font-weight: bold;
		color: #333;
		flex: 0 0 auto;
		width: 80rpx;
		margin-right: 10rpx;
	}

	.arc-html {
		color: #666666;
		word-break: break-all;
	}
}
//选项卡
.view-tab {
	margin-top: 20rpx;
	font-size: 25rpx;
	.tab-header {
		display: flex;
		margin-bottom: -1px;
		
		.tab-item {
			padding: 10upx 20upx;
		}
	}
	
	.tab-body {
		width: 100%;
		height: 600upx;
		border: #707070 1px solid;
		padding: 30upx;
		box-sizing: border-box;
	}
	
	.isSelect {
		border-bottom: #FFFFFF 1px solid;
		border-top: #707070 1px solid;
		border-left: #707070 1px solid;
		border-right: #707070 1px solid;
	}
}

.has-flower {
	border-radius: 50%;
	width: 100upx;
	height: 100upx;
	line-height: 100upx;
	text-align: center;
	background-image: linear-gradient(180deg, #fff4f4 0%, #ffc5c5 100%);
	position: absolute;
	z-index: 999;
	right: 20upx;
	top: 20upx;
	
	.iconbangyangfengcai {
		font-size: 50upx;
		color: #f48585;
	}
}

.accessory {
	display: flex;
	align-items: center;
	margin: 40upx 0;
	.accessoryText {
		font-size: 28upx;
		margin-left: 20upx;
		color: #20cfb8;
	}
}
.uploadIcon2 {
	width: 60upx;
	height: 60upx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #8dead2 0%, #04b78a 100%);
	border-radius: 8upx;
	margin-left: 20upx;
}
.iconwenjianjiaxcx {
	color: #ffffff;
}
.iconyulanxcx {
	color: #ffffff;
}
.iconbofangxcx {
	color: #ffffff;
}
.iconyinpinxcx {
	color: #ffffff;
}
.iconxiangcexcx {
	color: #ffffff;
}
</style>
